<template>
  <div class="register">
    <div class="myregister" align="center">
      <h4>注册新账号</h4>
      <el-form
        :model="registerForm"
        :rules="registerRules"
        ref="registerForm"
        label-width="0px"
      >
        <el-form-item label="" prop="account" style="margin-top: 10px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                class="inps"
                placeholder="账号"
                v-model="registerForm.account"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="" prop="passWord">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-lock"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                class="inps"
                type="password"
                placeholder="密码"
                v-model="registerForm.passWord"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-top: 55px">
          <el-button type="primary" round class="submitBtn" @click="submitForm"
            >注册
          </el-button>
        </el-form-item>
        <div class="unlogin">
          <router-link :to="{ path: '/login' }"> 去登陆? </router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import axios from 'axios'
export default {
  name: 'Register',
  data: function () {
    return {
      registerForm: {
        account: '',
        passWord: '',
      },
      registerRules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    }
  },

  methods: {
    ...mapMutations(['changeLogin']),
    submitForm() {
      const userAccount = this.registerForm.account
      const userPassword = this.registerForm.passWord
      if (!userAccount) {
        return this.$message({
          type: 'error',
          message: '账号不能为空！',
        })
      }
      if (!userPassword) {
        return this.$message({
          type: 'error',
          message: '密码不能为空！',
        })
      }
      console.log('用户输入的账号为：', userAccount)
      console.log('用户输入的密码为：', userPassword)
      axios({
        method: 'post',
        url: 'http://localhost:9090/trainT/register',
        params: {
          userName: userAccount,
          password: userPassword,
        },
      }).then((response) => {
        console.log(response.data)
        if (response.data === 'success') {
          this.$message({
            message: '恭喜你，注册成功！',
            type: 'success',
          })
          this.$router.push({ name: 'login' })
        } else {
          this.$message.error('此账号太过热门，请换一个账号')
        }
      })
    },
  },
}
</script>

<style scoped>
.register {
  width: 82vw;
  padding: 0;
  margin: 0;
  height: 80vh;
  font-size: 16px;
  background-position: left top;
  background-color: #242645;
  color: #fff;
  font-family: 'Source Sans Pro';
  position: relative;
}

.myregister {
  width: 240px;
  height: 280px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
  background: linear-gradient(
    230deg,
    rgba(53, 57, 74, 0) 0%,
    rgb(0, 0, 0) 100%
  );
}

.inps input {
  border: none;
  color: #fff;
  background-color: transparent;
  font-size: 12px;
}

.submitBtn {
  background-color: transparent;
  color: #39f;
  width: 200px;
}
</style>
